<template name="components">
	<view>
		<cu-custom>
			<block slot="content">图解政策</block>
		</cu-custom>
		<view class="main" @touchmove.stop.prevent="moveHandle">
			<view class=""></view>
			<view class="">
				<scroll-view scroll-y class="swiperStyle" @scrolltolower="scrollSC">
					<view class="main-list">
						<view class="list-box" v-for="(item,index) in photoList" :key="index" :data-id="item.id" :data-date="item.publishTime"
						 :data-tit="item.title" @click="getContent">
							<view class="list-img">
								<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg" mode="" class="img"></image>
							</view>
							<view class="title-box">
								<view class="list-title">
									<text class="list-text">{{ item.title }}</text>
								</view>
							</view>
							<view class="dian">
								<view class="dian-linner">
									...
								</view>
							</view>
						</view>
					</view>
					<view class="load-more">加载更多信息</view>
				</scroll-view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				userinfo: {},
				pageNo: 1,
				photoList: [],
				title: '',
				data: '',
				titleId: null
			};
		},
		created() {
			this.getPhoto()
		},
		methods: {
			getPhoto() {
				let token = uni.getStorageSync("token")
				let userinfo = uni.getStorageSync("userinfo")
				this.token = token
				this.userinfo = userinfo

				var data = {
					type: '图解政策',
					pageNo: this.pageNo
				}
				this.http.getaction('/policy/policy/list', data)
					.then(res => {

						this.photoList = res.data.result.records

					})
					.catch(err => {
						console.log(err)
					})

			},
			moveHandle() {

			},
			scrollSC() {
				console.log('a')
				this.pageNo = this.pageNo + 1
				var data = {
					type: '图解政策',
					pageNo: this.pageNo
				}
				this.http.getaction('/policy/policy/list', data)
					.then(res => {
						var a = setInterval(() => {
							for (var i = 0; i < res.data.result.records.length; i++) {
								if (i < 9) {
									this.photoList.push(res.data.result.records[i])
								}
								if (i >= 9) {
									this.photoList.push(res.data.result.records[i])
									clearTimeout(a)
									uni.hideLoading()
								}
							}
						}, 1000)
					})
					.catch(err => {
						console.log(err)
					})
			},
			getContent(a) {
				this.titleId = a.currentTarget.dataset.id
				this.title = a.currentTarget.dataset.tit
				this.date = a.currentTarget.dataset.date
				uni.navigateTo({
					url: '../articph/articph?id=' + this.titleId
				})
			}
		}
	}
</script>

<style lang="scss">
	.swiperStyle {
		height: 2000upx;
		// height: 100%;
	}

	.load-more {
		text-align: center;
		color: #AAAAAA;
		height: 30upx;
	}

	.load-more {
		text-align: center;
		color: #AAAAAA;
		padding: 10upx;
	}

	.main-list {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		height: 100%;
	}

	.list-box {
		height: 360upx;
		width: 46%;
		margin-bottom: 20upx;
		border-radius: 6%;
		background-color: #FFFFFF;
	}

	.list-img {
		width: 100%;
		height: 60%;
		border-radius: 6%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 6%;
		}
	}

	.list-title {
		width: 96%;
		overflow: hidden;
	}

	.list-text {
		height: 90upx;
		line-height: 35upx;
		font-size: 30upx;
	}

	.title-box {
		width: 100%;
		height: 100upx;
		margin-top: 10upx;
		display: flex;
		justify-content: center;
	}

	.dian {
		position: relative;
	}

	.dian-linner {
		position: absolute;
		right: 30upx;
		color: #8799A3;
	}
</style>
